<template>
    <div class="level">
        <h1>医院</h1>
        <div class="content">
            <div class="left">等级：</div>
            <ul class="hospital">
                <li @click="changLevel('')" :class="{ active: activeFlag == '' }">全部</li>
                <li @click="changLevel(level.value)" :class="{ active: activeFlag == level.value }"
                    v-for=" level  in  levelArr " :key="level.value">{{ level.name }}</li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reqHospitalLevelAndRegion } from '@/api/home/index'
import { onMounted, ref } from 'vue';
// 定义一个数组存储医院等级数据
let levelArr = ref<any>([])
// 控制医院等级高亮的数据
let activeFlag = ref('')
onMounted(() => {
    getLevel()
})
// 获取医院等级的数据
const getLevel = async () => {
    let result = await reqHospitalLevelAndRegion('HosType')
    if (result.code == 200) {
        levelArr.value = result.data
    }
}

// 点击高亮的按钮回调
const changLevel = (level: any) => {
    activeFlag.value = level
    $emit('getLevel', level)
}

let $emit = defineEmits(['getLevel'])
</script>

<style scoped lang="scss">
.level {
    color: #7f7f7f;

    h1 {
        font-weight: 900;
        margin: 10px 0px;
    }

    .content {
        display: flex;

        .left {
            margin-right: 10px;
        }

        .hospital {
            display: flex;

            li {
                margin-right: 10px;

                &.active {
                    color: #55a6fe;
                }
            }

            li:hover {
                color: #55a6fe;
                cursor: pointer;
            }
        }
    }
}
</style>